<template>
	<view class="content">
		<view class="input-group">
			<view class="input-row border">
				<text class="title">账号：</text>
				<m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入账号"></m-input>
			</view>
			<view class="input-row">
				<text class="title">密码：</text>
				<m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
			</view>
		</view>
		<view class="btn-row"><button type="primary" class="primary" @tap="bindLogin">登录</button></view>
		<!-- <view class="action-row">
            <navigator url="../reg/reg">注册账号</navigator>
            <text>|</text>
            <navigator url="../pwd/pwd">忘记密码</navigator>
        </view> -->
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import mInput from '../../components/m-input.vue';
export default {
	components: {
		mInput
	},
	data() {
		return {
			providerList: [],
			hasProvider: false,
			account: '',
			password: '',
			positionTop: 0
		};
	},
	computed: mapState(['URL', 'USER_INFO']),
	methods: {
		...mapMutations(['LOGIN', 'TO_UPDATE', 'GET_USER_INFO']),
		initPosition() {
			/**
			 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
			 * 反向使用 top 进行定位，可以避免此问题。
			 */
			this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
		},
		bindLogin() {
			this.checklogin();
			this.login();
		},
		login() {
			const data = {
				account: this.account,
				password: this.password
			};
			uni.request({
				url: this.URL + 'login',
				data: data,
				success: res => {
					if (!res.data.success) {
						uni.showToast({
							icon: 'none',
							title: res.data.error
						});
					} else {
						// console.log(JSON.stringify(res.data));
						this.LOGIN(res.data.data);
						this.getUserInfo(res.data.data);
					}
				}
			});
		},
		checklogin() {
			/**
			 * 客户端对账号信息进行一些必要的校验。
			 * 实际开发中，根据业务需要进行处理，这里仅做示例。
			 */
			if (this.account.length < 5) {
				uni.showToast({
					icon: 'none',
					title: '账号最短为 5 个字符'
				});
				return;
			}
			if (this.password.length < 6) {
				uni.showToast({
					icon: 'none',
					title: '密码最短为 6 个字符'
				});
				return;
			}
		},
		getUserInfo(arg) {
			uni.request({
				url: this.URL + 'user/getUserInformation',
				header: {
					token: arg
				},
				success: res => {
					this.TO_UPDATE(true);
					this.saveUserInfo(res.data.data);
				}
			});
		},
		saveUserInfo(arg) {
			uni.setStorage({
				key: 'USER_INFO',
				data: arg,
				success: res => {
					this.GET_USER_INFO();
					this.toMain();
				}
			});
		},
		toMain() {
			uni.navigateBack();
		}
	},
	onLoad() {
		this.initPosition();
	}
};
</script>

<style>
.action-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.action-row navigator {
	color: #007aff;
	padding: 0 20upx;
}
</style>
